<template>
  <div class="node-status-container">
    <h2>节点状态</h2>

    <el-table :data="nodeData" border style="width: 100%">
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="location" label="位置" width="180" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === '正常' ? 'success' : 'danger'">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="lastActive" label="最后活跃时间" />
      <el-table-column label="操作">
        <template #default>
          <el-button size="small" type="primary">详情</el-button>
          <el-button size="small" type="warning">重启</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        style="margin-top: 20px;"
        background
        layout="prev, pager, next"
        :total="100"
        :page-size="10"
    />
  </div>
</template>

<script setup>
const nodeData = [
  {
    name: '摄像头001',
    location: '教学楼A栋1楼大厅',
    status: '正常',
    lastActive: '2023-05-15 14:30:22'
  },
  {
    name: '摄像头002',
    location: '教学楼B栋2楼走廊',
    status: '损坏',
    lastActive: '2023-05-10 09:15:43'
  },
  {
    name: '摄像头003',
    location: '图书馆入口',
    status: '正常',
    lastActive: '2023-05-15 15:22:18'
  },
  {
    name: '摄像头004',
    location: '食堂一楼',
    status: '正常',
    lastActive: '2023-05-15 12:45:30'
  },
  {
    name: '摄像头005',
    location: '宿舍楼入口',
    status: '维护中',
    lastActive: '2023-05-14 18:10:05'
  }
]
</script>

<style scoped>
.node-status-container {
  padding: 20px;
}
</style>